<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="钢筋和混凝土指标" name="first">
        <el-form ref="form" :model="gongcheng" label-width="180px">
          <el-tag type="success">钢筋和混凝土指标</el-tag>
          <el-form-item label="混凝土强度设计值">
            <el-select v-model="gongcheng.c" placeholder="请选择标号" @change="Hun">
              <el-option label="C20" value="20"></el-option>
              <el-option label="C25" value="25"></el-option>
              <el-option label="C30" value="30"></el-option>
              <el-option label="C35" value="35"></el-option>
              <el-option label="C40" value="40"></el-option>
              <el-option label="C45" value="45"></el-option>
              <el-option label="C50" value="50"></el-option>
              <el-option label="C55" value="55"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="HRB纵筋强度等级">
            <el-select v-model="gongcheng.HRB" placeholder="请选择标号" @change="Hrb">
              <el-option label="HRB235" value="235"></el-option>
              <el-option label="HRB335" value="335"></el-option>
              <el-option label="HRB400" value="400"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="混凝土抗压强度设计值 fck">
            <el-input disabled v-model="gongcheng.fck"></el-input>
          </el-form-item>
          <el-form-item label="纵筋抗拉压强度设计值 fy">
            <el-input disabled v-model="gongcheng.fy"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="success" round class="botton" @click="jisuan">计算</el-button>
      </el-tab-pane>
      <el-tab-pane label="柱截面尺寸" name="second">
        <el-tag type="success">截面尺寸</el-tag>
        <el-form ref="form" :model="gongcheng" label-width="180px">
          <el-form-item label="柱计算长度l0(m)">
            <el-input v-model="gongcheng.l0"></el-input>
          </el-form-item>
          <el-form-item label="柱截面宽度b(mm)">
            <el-input v-model="gongcheng.b"></el-input>
          </el-form-item>
          <el-form-item label="柱截面高度h(mm)">
            <el-input v-model="gongcheng.h"></el-input>
          </el-form-item>
          <el-form-item label="柱长细比λ=l0/b">
            <el-input disabled v-model="gongcheng.r"></el-input>
          </el-form-item>
          <el-form-item label="混凝土面积 Ac=b*h(mm2)">
            <el-input disabled v-model="gongcheng.Ac"></el-input>
          </el-form-item>

          <el-button type="text" @click="dialogVisible = true">点击查看稳定系数表格</el-button>

          <el-form-item label="φ=需要查稳定系数表格(根据柱长细比λ)">
            <el-input v-model="gongcheng.j"></el-input>
          </el-form-item>
          <el-button type="success" round class="botton" @click="jisuan2">计算</el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="纵向钢筋" name="third">
        <el-tag type="success">纵向钢筋</el-tag>
        <el-form ref="form" :model="gongcheng" label-width="200px">
          <el-form-item label="全截面纵筋直径dst(mm)">
            <el-input v-model="gongcheng.dst"></el-input>
          </el-form-item>
          <el-form-item label="全截面纵筋根数n(根数)">
            <el-input v-model="gongcheng.n"></el-input>
          </el-form-item>
          <el-form-item label="全截面纵筋面积 As=Pi*dst^2/4(mm2)">
            <el-input disabled v-model="gongcheng.As"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="success" round class="botton" @click="jisuan3">计算</el-button>
      </el-tab-pane>
      <el-tab-pane label="计算公式详解" name="four">
        计算公式详解
        <el-button style="margin-left: 50px" type="success" round class="botton" @click="jisuan4">确认上述结果无误后计算</el-button>
        <div style="margin-top:10px " class="block">
          <el-image style="width: 1650px; height: 800px" :src="imgsrc1"></el-image>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      :visible="dialogVisible"
      title="稳定系数表格"
      width="70%"
      @close="onClose"
    >
      <div class="block">
        <el-image :src="imgsrc"></el-image>
      </div>
    </el-dialog>
    <el-dialog
      :visible="dialogVisible1"
      title="计算结果"
      width="30%"
      @close="onClose1"
    >
      此柱子的承载力计算结果为{{this.gongcheng.Mu}}KN
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'zhu1',
  data() {
    return {
      activeName: 'first',
      dialogVisible:false,
      dialogVisible1:false,
      imgsrc:require('./zhu.jpg'),
      imgsrc1:require('./zhujisuan.jpg'),
      gongcheng: {
        c:"",
        HRB:"",
        l0:'',
        b:"",
        h:'',
        dst:'',
        n:'',
        fck:'',
        fy:'',
        r:"",
        j:'',
        Ac:'',
        As:'',
        Mu:''
      }
    };
  },
  methods: {
    onClose(){
      this.dialogVisible=false
    },
    onClose1(){
      this.dialogVisible1=false
    },
    jisuan4(){
      this.gongcheng.Mu=0.9*this.gongcheng.j*(this.gongcheng.fck*this.gongcheng.Ac+this.gongcheng.fy*this.gongcheng.As)/1000
      this.dialogVisible1=true
    },
    jisuan3(){
      this.gongcheng.As=this.gongcheng.n*3.14159*(this.gongcheng.dst*this.gongcheng.dst)/4
    },
    jisuan2(){
      this.gongcheng.r=this.gongcheng.l0*1000/this.gongcheng.b
      this.gongcheng.Ac=this.gongcheng.b*this.gongcheng.h
    },
    jisuan(){
      switch (this.gongcheng.c){
        case "20": this.gongcheng.fck=9.6
          break
        case "25": this.gongcheng.fck=11.9
          break
        case "30": this.gongcheng.fck=14.3
          break
        case "35": this.gongcheng.fck=16.7
          break
        case "40": this.gongcheng.fck=19.1
          break
        case "45": this.gongcheng.fck=21.1
          break
        case "50": this.gongcheng.fck=23.1
          break
        case "55": this.gongcheng.fck=25.3
          break
      }
      switch (this.gongcheng.HRB){
        case "235":this.gongcheng.fy=210
          break
        case "335":this.gongcheng.fy=300
          break
        case "400":this.gongcheng.fy=360
          break
      }

    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    Hun(){

    },
    Hrb(){

    }


  }
}
</script>

<style scoped>
.el-input{
  width: 500px;
}
</style>
